<template>
  <div class="problem-list">
    <problem-list-item
      v-for="problem in problems"
      :key="problem.id"
      :problem="problem"
      @click="$emit('select', problem)"
    />
  </div>
</template>

<script>
import ProblemListItem from './ProblemListItem.vue'

export default {
  name: 'ProblemList',
  components: {
    ProblemListItem
  },
  props: {
    problems: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.problem-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>
